<template>
  <div style="height: 100%;width: 100%;overflow-x: auto;overflow-y: auto">
    <div style="width: 100%;height: 50%;margin-bottom: 3%">
      <div class="box top">
        <div class="bend_head">输入参数</div>
        <div class="left_top">
          <div class="tend">
            <input class="bend_input" v-model="form.R0">
            <span class="text">总传动比</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.B1min">
            <span class="text">差动级最大宽径比上限值</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.B2min">
            <span class="text">封闭级最大宽径比上限值</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.B3min">
            <span class="text">平行轴宽径比上限值</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.ratio_parallel">
            <span class="text">平行轴齿数比上限值</span>
          </div>
          <div class="tend" style="height: 13%;margin-left: 12.5%;">
            <div style="width: 25%;height: 100%;float: left">
              <input value="1" style="width: 40%;margin-left: 18%;margin-top: 20%;text-align: center"
                     v-model="form.ratio_D2_D1_min">
              <span style="margin-left: 10%;">≤</span>
            </div>
            <div style="width:43%;height: 100%;display: inline-block;float: left">
              <div style="height: 50%;text-align: center;border-bottom: 1px solid black;margin-top: 5%;">封闭级外径</div>
              <div style="height: 50%;text-align: center;">差动级外径</div>
            </div>
            <div style="width: 25%;height: 100%;float: left">
              <span style="margin-left: 10%;margin-right: 10%;">≤</span>
              <input value="1.2" style="width: 40%;margin-top: 20%;text-align: center" v-model="form.ratio_D2_D1_max">
            </div>
          </div>
          <div class="tend" style="height: 13%;margin-left: 12.5%;">
            <div style="width: 25%;height: 100%;float: left">
              <input value="1" style="width: 40%;margin-left: 18%;margin-top: 20%;text-align: center"
                     v-model="form.ratio_D2_D3_min">
              <span style="margin-left: 10%;">≤</span>
            </div>
            <div style="width:43%;height: 100%;display: inline-block;float: left">
              <div style="height: 50%;text-align: center;border-bottom: 1px solid  black;margin-top: 5%;">封闭级外径</div>
              <div style="height: 50%;text-align: center;">平行轴外半径</div>
            </div>
            <div style="width: 25%;height: 100%;float: left">
              <span style="margin-left: 10%;margin-right: 10%;">≤</span>
              <input value="1.2" style="width: 40%;margin-top: 20%;text-align: center" v-model="form.ratio_D2_D3_max">
            </div>
          </div>
        </div>
        <div class="right_top">
          <table class="table">
            <tr>
              <th></th>
              <th>不均载系数</th>
              <th>齿数比限制值</th>
            </tr>
            <tr>
              <td>
                6个行星轮
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.B[0]">
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.A[0]">
              </td>
            </tr>
            <tr>
              <td>
                5个行星轮
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.B[1]">
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.A[1]">
              </td>
            </tr>
            <tr>
              <td>
                4个行星轮
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.B[2]">
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.A[2]">
              </td>
            </tr>
            <tr>
              <td>
                3个行星轮
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.B[3]">
              </td>
              <td>
                <input class="bend_input table_input" v-model="form2.A[3]">
              </td>
            </tr>
          </table>
        </div>
        <button class="but" @click="centerDialogVisible = true">!</button>
      </div>
      <div style="width: 10%;height: 100%;float: left;padding-top: 20%">
        <button class="compute" @click="submit">计算</button>
      </div>
      <img :src=url style="height: 100%;width: 29%;float: right;margin: 20px 0;border: 1px solid #797979" class="box">
    </div>
    <div class="box center">
      <div class="bend_head">以外径最小为目标函数</div>
      <div style="height: 20%;width: 100%" class="content">
        <div>差动级行星个数</div>
        <div>封闭级行星轮个数</div>
        <div>差动级齿数比</div>
        <div>封闭级齿数比</div>
        <div>平行轴齿数比</div>
        <div>总体积表征量</div>
        <div>差动级齿圈半径表征值</div>
        <div>封闭级齿圈半径表征值</div>
        <div>平行轴外半径表征值</div>
        <div>差动级齿数宽径比</div>
        <div>封闭级齿数宽径比</div>
        <div>平行轴小轮宽径比</div>
        <div>差动级实际最大宽径比</div>
        <div>封闭级实际最大宽径比</div>
        <div>平行轴实际最大宽径比</div>
        <div>封闭级与差动级齿宽比</div>
        <div>封闭级与平行轴齿宽比</div>
      </div>
      <div class="table-wrapper1" style="height: 67%; width: 100%;overflow-y: scroll;">
            <span style="width: 40.95%;height:100%;text-align: center;display: inline-block;">
              <span v-for="(items) in str0" :key="items">
                <span>{{ items }}</span>
              </span>
            </span>
        <span style="width: 40.95%;height:100%;text-align: center;display: inline-block;">
              <span v-for="(items) in str2" :key="items">
                <span>{{ items }}</span>
              </span>
            </span>
        <span style="width: 17.55%;height:100%;text-align: center;display: inline-block;">
              <span v-for="(items) in str3" :key="items">
                <span style="width: 31.33%">{{ items }}</span>
              </span>
            </span>
      </div>
    </div>
    <div class="box end" style="width: 34%;float: left">
      <div class="bend_head">以体积最小为目标函数</div>
      <div style="height: 20%;width: 100%" class="content2">
        <div>差动级行星个数</div>
        <div>封闭级行星轮个数</div>
        <div>差动级齿数比</div>
        <div>封闭级齿数比</div>
        <div>平行轴齿数比</div>
        <div>总体积表征量</div>
      </div>
      <div class="table-wrapper2" style="height: 65%; width: 98%;margin-top: 0.1%;margin-left: 0.7%">
            <span style="width: 100%;height:97%;text-align: center;display: block;overflow-y: scroll">
              <span v-for="(items) in str1" :key="items">
                <span>{{ items }}</span>
              </span>
            </span>
      </div>
    </div>
    <div style="float: left;width: 60%;height: 40%;margin-top: 3.5%">
      <img :src="url2" style="height: 89%;width: 90%">
    </div>
    <el-dialog width="50%" style="text-align: left;padding: 2%;color:rgb(240,240,240);" append-to-body
               :visible="centerDialogVisible" title="齿数比限制值">
      <img :src="url3" style="width: 100%;height: 80%">
      <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import {nameOpti} from "@/api/file";

export default {
  name: "nameOpti",
  created() {
    document.title = '封闭差动(行星架输入)+一级平行轴传动比分配' //模块中文名
    this.$store.state.file.key = 62 //设置key为自己的页面编号
  },
  data() {
    return {
      url: require("/src/assets/image/image_62.png"),
      url2: require("/src/assets/image/image_63_5.png"),
      url3: require("/src/assets/image/image_62_01.png"),
      dialogVisible: false,
      str0: [],
      str1: [],
      str2: [],
      str3: [],
      centerDialogVisible: false,
      form: this.$store.state.file.dataList[62],
      table1: [],
      form2:{
        B: [1, 1, 1, 1],
        A: [3, 3.7, 5.7, 11],
      }
    }
  },
  methods: {
    open() {
      this.centerDialogVisible = true;
    },
    submit() {
      this.form.A = this.form2.A.join(',')
      this.form.B = this.form2.B.join(',')

      nameOpti(this.form)
          .then(res => {
            console.log("打印结果");
            console.log(res);

            this.str0 = res[0].split("\n\n")[1].split("    ");
            this.str2 = res[0].split("\n\n")[3].split("    ");
            this.str3 = res[0].split("\n\n")[5].split("    ");
            this.str0 = this.str0.slice(1)
            this.str3 = this.str3.slice(1)
            this.str2 = this.str2.slice(1)

            this.str1 = res[1].split("    ");
            this.str1 = this.str1.slice(1)
            console.log(this.str1);
            console.log(this.str0);
            console.log(this.str2);
            console.log(this.str3);
            this.table1 = res.data;
          })
          .catch(error => {
            console.log(error);
          });
    }
  }
}
</script>

<style scoped>
.box {
  margin: 20px 2%;
  background: #FFFFFF;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;

}

.top {
  height: 100%;
  width: 55%;
  float: left;
}

.center {
  height: 40%;
}

.end {
  height: 40%;
}

.bend_head {
  width: 100%;
  /*height: 31px;*/
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 15px;
  font-weight: bolder;
}

.table-wrapper1 > span > span > span {
  display: inline-block;
  width: 14.152%;
}

.compute {

  border-radius: 4px;
  border: 2px #686868;

  background: #6dd400;
  width: 70%;
  height: 29px;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  margin-left: 10%;
  float: left;
}

.bend_input {
  float: right;
  height: 72%;
  width: 19%;
  text-align: center;
}

.tend {
  height: 9%;
  width: 100%;
}

.text {
  float: right;
  margin-right: 22px;
  display: block;
  letter-spacing: 0;
  text-align: center;
}

.left_top {
  padding: 2% 2%;
  float: left;
  width: 51%;
  height: 100%;
  position: relative;
}

.table-wrapper1 > span,
.table-wrapper2 > span {
  width: 100%;
}

.table-wrapper1 tr,
.table-wrapper2 tr {
  display: block;
  width: 100%;
}

.sout2 > span > span > span {
  display: inline-block;
  width: 16.5%;
}

.right_top {
  width: 40%;
  float: left;
}

.heng p {
  width: 100%;
  height: 100%;
}

.but {
  text-align: center;
  width: 4%;
  float: right;
  margin-right: 5%;
  height: 8%;

  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}

.table td {
  height: 10%;
  width: 33%;
  text-align: center;
}

.table tr {
  height: 100%;
}

.table_input {
  float: left;
  width: 78%;
  height: 79%;
}

.sout > span > span > span {
  display: inline-block;
  width: 5.8%;
}

.content div {
  float: left;
  height: 100%;
  width: 5.5%;
  text-align: center;
  margin-left: 0.35%;
}

.content2 div {
  float: left;
  height: 100%;
  width: 15%;
  text-align: center;
  margin-left: 0.35%;
}

.table-wrapper2 > span > span > span {
  display: inline-block;
  width: 16.5%;
}
</style>
